<template>
  <div v-show="$route.name == 'show-purchase'">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/show-list' }">展厅列表</el-breadcrumb-item>
      <el-breadcrumb-item>添加购买</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-form :model="saveForm" :rules="saveFormRules" ref="saveForm" label-width="110px" class="demo-saveForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="日期" prop="date">
              <el-date-picker type="date" placeholder="选择日期" v-model="saveForm.date" value-format='yyyy-MM-dd'>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="customer">
              <el-input v-model="saveForm.customer"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width:90%" label="客户地址" prop="address">
              <el-input v-model="saveForm.address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系人" prop="cname">
              <el-input v-model="saveForm.cname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="saveForm.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型" prop="product">
              <el-input v-model="saveForm.product" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="名称" prop="productn">
              <el-input v-model="saveForm.productn" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="型号" prop="model">
              <el-input v-model="saveForm.model" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本">
              <el-input-number v-model="cost" controls-position="right" :precision="2" :step="1" disabled></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="数量" prop="amoumt">
              <el-input-number v-model="saveForm.amoumt" controls-position="right" :precision="0" :step="1" :min="0" disabled></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单价" prop="price">
              <el-input-number v-model="saveForm.price" controls-position="right" :precision="2" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="折扣" prop="discount">
              <el-input-number v-model="saveForm.discount" controls-position="right" :precision="2" :step="1" :min="0" :max="saveForm.price*saveForm.amoumt"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="总价" prop="total">
              <el-input-number v-model="saveForm.total" controls-position="right" :precision="2" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实收" prop="paid">
              <el-input-number v-model="saveForm.paid" controls-position="right" :precision="2" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结算方式" prop="js">
              <el-radio-group v-model="saveForm.js">
                <el-radio label="赊销">赊销</el-radio>
                <el-radio label="现金">现金</el-radio>
                <el-radio label="银行存款">银行存款</el-radio>
                <el-radio label="预付">预付</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否含税" prop="tax">
              <el-radio-group v-model="saveForm.tax">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否需要发票" prop="invoice">
              <el-radio-group v-model="saveForm.invoice">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="安装日期" prop="installtime">
              <el-date-picker type="date" placeholder="选择日期" v-model="saveForm.installtime" value-format='yyyy-MM-dd'>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装时间" prop="itime">
              <el-time-picker
                v-model="saveForm.itime"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
                placeholder="任意时间点"
                value-format='HH:mm:ss'>
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="other">
              <el-input v-model="saveForm.other"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button @click="back">返回</el-button>
            <el-button type="primary" @click="submitForm()">确定</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      role: '',
      saveForm: {
        date: '',
        customer: '',
        address: '',
        cname: '',
        phone: '',
        product: '会议屏',
        productn: '',
        model: '',
        price: 0,
        amoumt: 0,
        discount: 0,
        total: 0,
        paid: 0,
        js: '现金',
        invoice: 1,
        tax: 1,
        installtime: '',
        itime: '',
        other: ''
      },
      saveFormRules: {
        date: [{ required: true, message: '请选择日期', trigger: 'change' }],
        address: [{ required: true, message: '请输入客户地址', trigger: 'blur' }],
        cname: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        price: [{ required: true, message: '请输入单价', trigger: 'blur' }],
        paid: [{ required: true, message: '请输入实收', trigger: 'blur' }],
        discount: [{ required: true, message: '请输入折扣', trigger: 'blur' }],
        js: [{ required: true, message: '请选择结算方式', trigger: 'change' }],
        invoice: [{ required: true, message: '请选择是否需要发票', trigger: 'change' }],
        tax: [{ required: true, message: '请选择是否含税', trigger: 'change' }]
      },
      amoumt: 0,
      // 成本
      cost: 0,
      // 新品还是旧品
      new: 1
    }
  },
  mounted() {
    const myDate = new Date()
    const year = myDate.getFullYear() // 获取当前年份
    const month = myDate.getMonth() + 1 // 获取当前月份(0-11,0代表1月所以要加1);
    const day = myDate.getDate() // 获取当前日（1-31）
    // 日期格式：2019/07/29 - 2019/07/29
    this.saveForm.date = `${year}-${month}-${day}`
    this.role = localStorage.getItem('role')
    this.getShowData()
  },
  watch: {
    'saveForm.amoumt': {
      handler: function(val, oldval) {
        this.saveForm.total = val * this.saveForm.price - this.saveForm.discount
      }
    },
    'saveForm.price': {
      handler: function(val, oldval) {
        this.saveForm.total = val * this.saveForm.amoumt - this.saveForm.discount
      }
    },
    'saveForm.discount': {
      handler: function(val, oldval) {
        this.saveForm.total = this.saveForm.price * this.saveForm.amoumt - val
      }
    },
    'saveForm.total': {
      handler: function(val, oldval) {
        if (val != this.saveForm.amoumt * this.saveForm.price - this.saveForm.discount) {
          // 所填总价 > 数量*单价 : 折扣为0 单价为当前总数/数量
          if (val > this.saveForm.price * this.saveForm.amoumt) {
            this.saveForm.discount = 0
            this.saveForm.price = val / this.saveForm.amoumt
          // 数量*单价-折扣 < 所填总数 < 数量*单价 ：修改折扣值
          } else {
            this.saveForm.discount = this.saveForm.price * this.saveForm.amoumt - val
          }
        }
      }
    }
  },
  methods: {
    getShowData() {
      if (this.$route.name === 'show-purchase') {
        if (this.$route.params.id) {
          this.id = this.$route.params.id
          localStorage.setItem('ShowPurchaseId', this.$route.params.id)
        } else {
          this.id = localStorage.getItem('ShowPurchaseId')
        }
        this.getShow()
      }
    },
    // 获取展厅数据
    async getShow() {
      // 发起编辑的网络请求
      const { data: result } = await this.$http.get('/show/' + this.id)
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      this.saveForm.customer = result.data.customer
      this.saveForm.address = result.data.address
      this.saveForm.cname = result.data.cname
      this.saveForm.phone = result.data.phone
      this.saveForm.phone = result.data.phone
      this.saveForm.product = result.data.product
      this.saveForm.productn = result.data.productn
      this.saveForm.model = result.data.model
      this.saveForm.id = this.id
      this.saveForm.new = result.data.new
      this.saveForm.amoumt = result.data.amoumt
      this.cost = result.data.cost
      this.new = result.data.new
    },
    // 返回
    back() {
      localStorage.removeItem('ShowPurchaseId')
      this.$router.push({ 'name': 'show-update' })
    },
    async submitForm() {
      this.$refs.saveForm.validate(async (valid) => {
        if (!valid) return
        // 可以发起新增入库单的网络请求
        const { data: result } = await this.$http.post('/show-purchase', { data: this.saveForm })
        if (result.status !== 200) {
          return this.$message.error(result.msg)
        }
        this.$message.success('新增成功！')
        this.$router.push({ path: '/show-list' })
      })
    }
  }
}
</script>
<style scoped>
.dropdownbox{
  z-index: 10001 !important;
}
</style>
